<template>
	<view>
		<view class="companyInfo">
			<view>
				管理员：{{userInfo.company_no}}
			</view>
			<a id="downlink"></a>
			<view class="linkTxt" @click="getExcelData">下载</view>
			<view>
				<view class="linkTxt" @click="quitLogin">退出</view>
			</view>
		</view>
		<view class="uni-padding-wrap">
			<view class="uni-flex uni-column table-content">
				<view class="uni-flex uni-row table-header">
					<view class="flex-item table-column" style="width: 40%;">企业号</view>
					<view class="flex-item table-column" style="width: 30%;">注册时间</view>
					<view class="flex-item table-column" style="width: 25%;">操作</view>
				</view>
				<view v-if="json_data.length > 0" class="flex-item flex-item-V" v-for="(item, index) in json_data" v-bind:key="index">

					<view class="uni-flex uni-row table-body">
						<view class="flex-item table-column linkTxt" style="width: 40%;" @click="goDetail(item)">{{item.company_no}}</view>
						<view class="flex-item table-column" style="width: 30%;">{{item.dateF}}</view>
						<view class="flex-item table-column linkTxt" style="width: 25%;">
						<navigator :url="item.statUrl" hover-class="navigator-hover">统计查询</navigator>
						</view>
					</view>
				</view>
				<view v-if="json_data.length === 0" class="table-body" style="text-align: center;">
					暂无数据
				</view>
			</view>
			<view class="pageList">
				<uni-pagination :total="total" :current="page" :pageSize="size" @change="changePage"></uni-pagination>
			</view>
			<view class="pageDesc">第{{page}}页，总共{{total}}条，每页{{size}}条</view>
		</view>
	
		<uni-popup ref="popup" type="center">
			<view class="popupCon">
				<view>企业号：{{currItem.company_no}}</view>
				<view>名称：{{currItem.company_name}}</view>
				<view>邮箱：{{currItem.email}}</view>
				<view>手机号：{{currItem.phone || '-'}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPagination from '@dcloudio/uni-ui/lib/uni-pagination/uni-pagination.vue';
	import uniPopup from "@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue";
	import { xlsxUtil } from '../../../common/xlsxUtil.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import moment from 'moment';
	export default {
		components: {
			uniPagination,
			uniPopup
		},
		data() {
			return {
				total: 0,
				page: 1,
				size: 10,
				formData: {},
				json_data: [],
				excel_fields:{
					company_no:'企业号',
					company_name:'名称',
					email:'邮箱',
					phone:'手机',
					createTime: {
						title: "提交时间",
						//自定义回调函数
						callback: value => {
							return value ? moment(value).format('YYYY-MM-DD HH:mm:ss') : '';
						}
					}
				},
				currItem: {}
			}
		},
		onLoad: function(option) {
			console.log(option.p);
			this.page = option.p || 1;
		},
		computed: mapState(['hasLogin', 'userInfo']),
		methods: {
			...mapMutations(['logout']),
			quitLogin: function() {
				this.logout();
				uni.navigateTo({
					url: '../../user/login'
				});
			},
			getExcelData:function() {
				xlsxUtil.init('company_account_excel', {}, this.excel_fields, 'downlink', '企业注册信息表');
				xlsxUtil.getExcelData();
			},
			goDetail: function(d) {
				this.currItem = d;
				this.$refs.popup.open();
			},
			changePage: function(e) {
				this.page = e.current;
				this.formData.page = e.current;
				this.get();
			},
			get() {
				uni.showLoading({
					title: '处理中...'
				})
				uniCloud.callFunction({
					name: 'company_accout_get',
					data: this.formData
				}).then((res) => {
					console.log(res)
					uni.hideLoading()
					const resData = res.result || {};
					const arr = resData.data || [];
					for (var i = 0, len = arr.length; i < len; i += 1) {
						arr[i].dateF = moment(arr[i].createTime).format('YYYY-MM-DD HH:mm:ss');
						arr[i].statUrl = 'stat?company='+arr[i].company_no+'&p='+this.page;
					}
					this.json_data = arr;
					this.total = resData.total || 0;
					this.page = resData.page || 1;
				}).catch((err) => {
					console.log(err);
					uni.hideLoading()
					uni.showModal({
						content: `查询失败，错误信息为：${err.message}`,
						showCancel: false
					})
				})
			}
		},
		onShow() {
			if (this.hasLogin) {
				if (this.userInfo.super == 1) {
					this.formData = {
						page: this.page,
						size: this.size
					};
					this.get();
				} else {
					uni.navigateTo({
						url: '../stat/stat'
					});
				}
			} else {
				this.quitLogin();
			}
		}
	}
</script>

<style>
	.companyInfo {
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
	}
	.popupCon {
		background-color: #FFFFFF;
		padding: 30rpx 40rpx;
	},
	.linkTxt {
		color: #007aff;
		display: inline;
	}

	.uni-form-item .title {
		padding: 14rpx 0;
		width: 180rpx;
		text-align: right;
		background-color: #FFFFFF;
	}

	.table-content {
		padding: 10rpx 0;
	}

	.table-column {
		text-align: center;
		line-height: 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.table-header {
		justify-content: space-between;
		color: #909399;
		background-color: #FFFFFF;
		border-top: 1px solid #ebeef5;
		border-bottom: 1px solid #ebeef5;
		padding: 18rpx 0;
	}

	.table-body {
		justify-content: space-between;
		background-color: #FFFFFF;
		border-bottom: 1px solid #ebeef5;
		padding: 10rpx 0;
		color: #888888;
	}

	.pageList {
		background-color: #FFFFFF;
		margin-top: 20rpx;

	}

	.pageDesc {
		text-align: center;
		margin-top: 10rpx;
		margin-bottom: 40rpx;
		font-size: 14px;
	}
</style>
